<%--
  Created by IntelliJ IDEA.
  User: 23827
  Date: 2019/9/22
  Time: 21:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>centerInformation</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <link rel="stylesheet" href="../css/user/centerPassword.css" type="text/css">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
</head>

<body>

<%@ include file="../common/nav2.jsp"%>


<!-- 第二层导航栏 -->

<!-- 第三层信息填写 -->
<div style="overflow: hidden;margin-top: 50px">
    <!-- 左边 -->
    <div id="left">
        <a href="${path}/edit/list" class="list-group-item active">
            实名认证
        </a>
        <a href="${path}/information/list"  class="list-group-item">信息完善</a>
        <a href="${path}/number/list" class="list-group-item">手机绑定</a>
        <a href="${path}/address/list" class="list-group-item">地址管理</a>
        <a href="${path}/password/list" class="list-group-item">密码管理</a>
    </div>
    <!-- 右边 -->
    <div class="right">
        <!-- 右边第一层 -->
        <div class="right-first">
            <h4 class="characters1">信息完善</h4>
            <%--<button type="button" class="btn btn-primary" class="right-first-button">取消修改</button>--%>
        </div>
        <!-- 右边第二层修改登录密码 -->

        <p class="right-1">*</p>
        <p class="right-2">给自己换一个头像吧</p><br><br><br>
        <a href="#">
            <div id="sixth-bottom">
                <%--<img id="sixth-picture" src="../imgs/usercenterpicture.jpg" alt="图片加载失败!">--%>
                <label
                        style="border: 1px #999 solid; height: 160px; width: 160px; border-radius: 50%; display: block;float: left;margin-left: 20px;margin-top: 60px;margin-top: 30px">
                    <div style="text-align: center" id="unpicture">
                        <from method="post" enctype="multipart/form-data" id="path">
                            <input class="file" style="opacity: 0" type="file" height="160px" ; width="160px"
                                   name="myfile" multiple="multiple" accept="image/jpg,image/jpeg,image/png" id="myfile" value="${p.path}">
                            <span class="ser-cover-textI" style="color:#999; font-size: 30px">+</span><br>
                            <span class="ser-cover-textII" style="color:#999;">上传头像<br></span>
                        </from>
                    </div>
                    <div id="preview">

                    </div>
                </label>
            </div>
        </a>

        <div style="margin-top: 200px;">
            <p class="right-1">*</p>
            <p class="right-2">给自己取一个昵称吧</p><br><br><br>
            <input type="text" class="righttext-1" id="name" value="${userInfo.name}">

        </div>

        <div>
            <button type="button" class="btn btn-primary"
                    style="margin-left: 22px;margin-top: 30px;width: 280px;height: 40px;border:0px;background-color: #008FF4" id="commit">确认提交</button>
        </div>

    </div>
</div>
<%@ include file="../common/footer.jsp"%>


<script>
    var rootPath="http://localhost:8081/";

    $('#myfile').change( function() {
        $("#unpicture").hide();
        // $("#pictureId").show();
        $("#path").ajaxSubmit({
            url: rootPath+"test/upload1",
            method: 'POST',
            datType: 'json',

            success: function (data) {
                console.log(data.imgUrl);
                console.log(typeof data.imgUrl);
                var ele = "<img src=\"\" id='pictureId' class='pictureId' style='height: 160px; width: 160px;border-radius: 50%;'/>";
                $("#preview").append(ele);//编程一个jquery的对象
                $("#preview").find("img").attr("src",data.imgUrl);//调用jquery的方法找到

                 var  url =data.imgUrl;
                 console.log(url);

            },
        })
    });
</script>


<script>

    $(function(){
        //隐藏警告信息
        $(".alert-warning").hide();

        $("#commit").click(function(){
            var name = document.getElementById("name").value;
            $.ajax({
                //提交数据的类型 POST GET
                type:"POST",
                //提交的网址
                url:"/information/add",
                //提交的数据
                data: JSON.stringify({
                   name:name
                }),
                //参数格式为json
                contentType: "application/json; charset=utf-8",
                //返回数据的格式e
                datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
                //成功返回之后调用的函数
                success:function(data){
                    console.log(data);
                    if("OK" == data.codeStatus){
                        alert("成功上传昵称!")
                        window.location="/center/list"
                    }else {
                        alert("失败")
                    }
                },
                //调用出错执行的函数
            });
        });
    });
</script>



<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>

<script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
<script type="text/javascript" src="/js/services/ajaxfileupload.js"></script>

<%--<script src="${path}/js/client/register.js"></script>--%>
</body>

</html>
